<div class="container mt-4">
  <div class="card">
    <div class="card-body">
      <h4 class="header-title">商品信息表</h4>
      <table id="product-datatable" class="table dt-responsive nowrap w-100">
        <thead>
          <tr>
            <th>图片</th>
            <th>商品名称</th>
            <th>所属农户</th>
            <th>生产日期</th>
            <th>生长周期</th>
            <th>产地</th>
            <th>种类</th>
            <th>价格</th>
            <th>库存</th>
            <th>点击数</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
      <div class="modal fade" id="productModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="productModalLabel">新增商品</h5>
              <button
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
              ></button>
            </div>
            <div class="modal-body">
              <form id="productForm">
                <input type="hidden" id="productId" />
                <div class="mb-3">
                  <label class="form-label">商品名称</label>
                  <input
                    type="text"
                    class="form-control"
                    id="productName"
                    required
                  />
                </div>
                <div class="mb-3">
                  <label class="form-label">上传图片</label>
                  <input
                    type="file"
                    class="form-control"
                    id="productImage"
                    accept="image/*"
                  />
                  <img
                    id="imagePreview"
                    src=""
                    style="display: none; max-width: 100px; max-height: 100px"
                  />
                </div>
                <div class="mb-3">
                  <label class="form-label">生产日期</label>
                  <input type="date" class="form-control" id="productionDate" />
                </div>
                <div class="mb-3">
                  <label class="form-label">生长周期</label>
                  <input
                    type="text"
                    class="form-control"
                    id="productionPeriod"
                  />
                </div>
                <div class="mb-3">
                  <label class="form-label">产地</label>
                  <input
                    type="text"
                    class="form-control"
                    id="productionPlace"
                  />
                </div>
                <div class="mb-3">
                  <label class="form-label">种类</label>
                  <input
                    type="text"
                    class="form-control"
                    id="category"
                    required
                  />
                </div>
                <div class="mb-3">
                  <label class="form-label">价格</label>
                  <input
                    type="number"
                    class="form-control"
                    id="productPrice"
                    min="0"
                    step="0.01"
                    required
                  />
                </div>
                <div class="mb-3">
                  <label class="form-label">库存</label>
                  <input
                    type="number"
                    class="form-control"
                    id="stock"
                    min="0"
                    required
                  />
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" id="saveProductBtn">
                保存
              </button>
              <button
                type="button"
                class="btn btn-secondary"
                data-bs-dismiss="modal"
              >
                取消
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="modal fade" id="deleteConfirmModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header bg-danger text-white">
              <h5 class="modal-title">确认删除</h5>
              <button
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
              ></button>
            </div>
            <div class="modal-body">
              <p>你确定要删除该商品吗？此操作无法撤销。</p>
            </div>
            <div class="modal-footer">
              <button
                type="button"
                class="btn btn-secondary"
                data-bs-dismiss="modal"
              >
                取消
              </button>
              <button
                type="button"
                class="btn btn-danger"
                id="confirmDeleteBtn"
              >
                确定删除
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
